<template>
  <div class="wscn-http404-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>测试中。。。</span>
        <el-button style="float: right; padding: 3px 0" type="text">{{ content }}</el-button>
      </div>

      <div v-for="item in list">
        <h2>这是一个标题</h2>
        <div v-if="item.type==1">`
          <li>A:{{ item.option1 }}</li>
          <li>B:{{ item.option2 }}</li>
          <li>C:{{ item.option3 }}</li>
          <li>D:{{ item.option4 }}</li>
          <el-radio-group v-model="item.rightOption" class="radio-01">
            <el-radio :label="1">A</el-radio>
            <el-radio :label="2">B</el-radio>
            <el-radio :label="3">C</el-radio>
            <el-radio :label="4">D</el-radio>
          </el-radio-group>
        </div>

        <div v-if="item.type==2">
          <el-input/>
        </div>
      </div>
      <el-button style="float: right; padding: 3px 0" type="text" @click="finish">交卷</el-button>
    </el-card>
  </div>
</template>

<script>
import { getInfo } from '@/api/test'
import { create } from '@/api/userTest'
import { getToken } from '@/utils/auth'

export default {
  name: 'Page404',
  data() {
    return {
      total: 600,
      content: '正在开始考试 ',
      list: [],
      test: {}
    }
  },
  computed: {
    message() {
      return '网管说这个页面你不能进.d.....'
    }
  },
  created() {
    // console.log(this.$route.params);
    this.fethData(this.$route.params.id)
    this.countDown()
  },
  methods: {
    countDown() {
      window.setInterval(() => {
        // console.log(this.total);
        this.total--
        this.content = '考试剩余时间' + this.total
      }, 1000)
    },
    fethData(testId) {
      getInfo(testId).then(resp => {
        this.test = resp.data
        this.list = JSON.parse(this.test.json)
        // console.log(this.list)
      })
    },
    finish() {
      const token = getToken()

      create(this.test, token).then(resp => {
        this.$message({
          message: '交卷成功',
          type: 'success'
        })
        this.$router.push('/')
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.wscn-http404-container {
  margin-left: 20%;
  margin-right: 20%;
}
li {
  margin-top: 5px;
  list-style-type: none;
  font-size: 18px;
}
.radio-01 {
  margin-top: 20px;
}
</style>
